Vue 三层菜单栏中，菜单的展开和收起问题的解决办法

#Vue 三层菜单栏中，菜单的展开和收起问题的解决办法| 来源: 网络整理| 查看: 265

在这里插入图片描述例如我们有这样一列菜单

一级菜单1 二级菜单1 三级菜单1 三级菜单2 三级菜单3 三级菜单4 二级菜单2 三级菜单1 三级菜单2 二级菜单3 三级菜单11 一级菜单2 复制代码

如果我们要默认展开1级菜单，变成这个样子在这里插入图片描述我们可以在el-menu内设置

:default-openeds=['1','2'] 复制代码

即将index=1和2的菜单默认展开，不过这样继续往下会有一些坑：如果我们给el-menu加上select三级菜单切换组件的操作，组件切换生效时，二级菜单会默认收起。要解决这个问题，我们需要将default-openeds的值设为变量。然后通过open的动作动态去修改default-openeds的值，例如下:

一级菜单1 二级菜单1 三级菜单1 三级菜单2 三级菜单3 三级菜单4 二级菜单2 三级菜单1 三级菜单2 二级菜单3 三级菜单11 一级菜单2 复制代码 methods:{ handleSelect(key, keyPath){ console.log(key, keyPath); if (key == '1-1-1'){ this.currentView = 'componnts' } }, handleOpen(key){ this.default_openeds_array.push(key); } } 复制代码

通过向default_openeds_array里push三级菜单的index可以保证二级菜单不会在切换组件时自动收起。

【本文地址】

公司简介

联系我们